<script setup>
	import {
		ref,
		reactive,
		provide,
		inject,
		onMounted,
		computed,
		watch,
	} from 'vue'

	// prop父子传参接收
	const props = defineProps({
		circleColor: {
			type: String,
			default: 'rgb(159, 89, 224)',
		},
		triangleColor: {
			type: String,
			default: '#7fdcb2',
		},
		rectColor: {
			type: String,
			default: 'rgb(75, 146, 231)',
		},
		pointColor: {
			type: String,
			default: 'rgb(0, 106, 255)',
		},
		scale: {
			type: Number,
			default: 1,
		},
		loading: {
			type: Boolean,
			default: true,
		},
		spanColor: {
			type: String,
			default: 'rgb(9, 57, 116)',
		},
		// 文字大小
		fontSize: {
			type: String,
			default: '18px',
		},
		spanText: {
			type: String,
			default: 'Loading',
		},
		divHeight: {
			type: String,
			default: '100%',
		},
		maskColor: {
			type: String,
			default: 'rgba(255, 255, 255, 1)',
		},
	})
</script>
<template>
	<div
		:class="[
			'animate__animated mask animate__fast',
			loading ? 'animate__fadeIn' : 'animate__fadeOut hide',
		]"
	>
		<div class="three-figurerotate_div">
			<div class="loader">
				<svg
					viewBox="0 0 80 80"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink"
				>
					<!-- 圆形 -->
					<circle class="circle-rotate" cx="40" cy="40" r="32" style="" />
					<circle class="circle-point" cx="40" cy="40" r="1" style="" />
				</svg>
			</div>
			<div class="loader">
				<svg
					viewBox="0 0 80 80"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink"
				>
					<!-- 多边形 polygon -->
					<!-- 自己一格格调的数值，保证三角形每条边一样宽 -->
					<polygon points="4,70 75,70 40,5" style="" />
					<circle class="triangle-point" cx="20" cy="35" r="1" style="" />
				</svg>
			</div>

			<div class="loader">
				<svg
					viewBox="0 0 80 80"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink"
				>
					<!-- 矩形 rect -->
					<!-- 自己一格格调的数值，保证三角形每条边一样宽 -->
					<rect x="8" y="8" width="64" height="64" style="" />
					<circle class="rect-point" cx="40" cy="40" r="1" style="" />
				</svg>
			</div>

			<span :style="{ color: spanColor, fontSize: fontSize }"
				>{{ spanText }}<span class="dot">...</span></span
			>
		</div>
	</div>
</template>
<style scoped lang="less">
	.hide {
		// 哈哈哈没想到transition对z-index也有用，这下解决好多事，transition，我滴神！
		z-index: -999 !important;
		transition: z-index 2s; // *2023/3/2 需要把这个过渡时间拉很长,可以使得消失动画播放完全,不用担心点击不了下面的,只要你z-index设置的负值够小,实测-999时2秒差不多
	}
	.mask {
		width: 100%;
		height: v-bind(divHeight);
		position: absolute;
		left: 0;
		top: 0;
		background-color: v-bind(maskColor);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		z-index: 100;
	}
	.three-figurerotate_div {
		display: flex;
		height: 44px;
		width: 150px;
		justify-content: space-around;
		position: relative;
		transform: scale(v-bind(scale));
		.loader {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 44px;
			height: 44px;

			.circle-point,
			.rect-point,
			.triangle-point {
				// 圆点通用样式
				stroke: v-bind(pointColor);
			}

			svg {
				// 空心
				fill: none;
				// 环宽度
				stroke-width: 10px;
				// 转角的规定
				stroke-linecap: round;
				stroke-linejoin: round;

				// 圆形的css
				.circle-rotate {
					stroke: v-bind(circleColor);
					// svg下的圆
					stroke-dasharray: 150 50 150 50;
					// 偏移量
					stroke-dashoffset: 75;
					// 动画
					animation: pathCircle 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
				}
				.circle-point {
					transform: translate(-30px, 0px);
					// 动画 circleDotRect 圆点矩阵
					animation: circleDotRect 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
				}

				// 三角形的css
				polygon {
					stroke: v-bind(triangleColor);
					stroke-dasharray: 145 75 145 75;
					// 偏移量
					stroke-dashoffset: 0;
					// 动画
					animation: pathTriangle 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
				}

				.triangle-point {
					// 动画 circleDotRect 圆点矩阵
					animation: triangleDotRect 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
				}

				// 正方形的css
				rect {
					stroke: v-bind(rectColor);
					stroke-dasharray: 192 64 192 64;
					// 偏移量
					stroke-dashoffset: 0;
					// 动画
					animation: pathRect 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
				}
				.rect-point {
					transform: translate(-30px, 0px);
					// 动画 circleDotRect 圆点矩阵
					animation: rectDotRect 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
				}
			}
		}

		> span {
			position: absolute;
			bottom: 0;
			transform: translateY(100%);
			display: flex;
			justify-content: center;
			align-items: center;

			.dot {
				animation: dot 2s infinite step-start;
				overflow: hidden;
				font-family: simsun; /*固定字体避免设置的宽度无效*/
				display: inline-block;
				width: 1.5em;
				overflow: hidden;
			}
		}
	}

	@keyframes pathCircle {
		25% {
			stroke-dashoffset: 125;
		}
		50% {
			stroke-dashoffset: 175;
		}
		75% {
			stroke-dashoffset: 225;
		}
		100% {
			stroke-dashoffset: 275;
		}
	}

	@keyframes dot {
		/*动态改变显示宽度, 但始终让总占据空间不变, 避免抖动*/
		0% {
			width: 0;
			margin-right: 1.5em;
		}
		33% {
			width: 0.5em;
			margin-right: 1em;
		}
		66% {
			width: 1em;
			margin-right: 0.5em;
		}
		100% {
			width: 1.5em;
			margin-right: 0;
		}
	}

	@keyframes pathTriangle {
		33% {
			stroke-dashoffset: 74;
		}
		66% {
			stroke-dashoffset: 146;
		}
		100% {
			stroke-dashoffset: 221;
		}
	}

	@keyframes pathRect {
		25% {
			stroke-dashoffset: 64;
		}
		50% {
			stroke-dashoffset: 128;
		}
		75% {
			stroke-dashoffset: 192;
		}
		100% {
			stroke-dashoffset: 256;
		}
	}

	@keyframes circleDotRect {
		25% {
			transform: translate(0px, 30px);
		}
		50% {
			transform: translate(30px, 0px);
		}
		75% {
			transform: translate(0px, -30px);
		}
		100% {
			transform: translate(-30px, 0px);
		}
	}

	@keyframes triangleDotRect {
		33% {
			transform: translate(35px, 0px);
		}
		66% {
			transform: translate(20px, 35px);
		}
		100% {
			transform: translate(0px, 0px);
		}
	}

	@keyframes rectDotRect {
		25% {
			transform: translate(0px, 30px);
		}
		50% {
			transform: translate(30px, 0px);
		}
		75% {
			transform: translate(0px, -30px);
		}
		100% {
			transform: translate(-30px, 0px);
		}
	}
</style>
